<template>
	<view class="form">
		<u-form labelPosition="left" :model="addressInfo" ref="form">
			<u-form-item label="联系人" prop="name" borderBottom labelWidth="100">
				<u--input v-model="addressInfo.name" placeholder="请输入姓名" border="none"></u--input>
			</u-form-item>
			<u-form-item label="手机号码" prop="phone" borderBottom labelWidth="100">
				<u--input v-model="addressInfo.phone" placeholder="请输入11位手机号" border="none" maxlength="11"></u--input>
			</u-form-item>
			<u-form-item label="地区信息" prop="province" borderBottom labelWidth="100">
				<pickerAddress @change="change">
					<text
						v-if="addressInfo.province">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}</text>
					<text style="color: rgb(192, 196, 204);" v-else>{{city}}</text>
				</pickerAddress>
			</u-form-item>
			<u-form-item label="详细地址" prop="address" borderBottom labelWidth="100">
				<u--input v-model="addressInfo.address" placeholder="街道门牌信息" border="none"></u--input>
			</u-form-item>
		</u-form>

		<view class="button">
			<u-button @click="submitForm" color="#d81e06" shape="circle">确认</u-button>
		</view>

	</view>

</template>

<script>
	import pickerAddress from '@/uni_modules/hu-pickerAddress/components/hu-pickerAddress/hu-pickerAddress.vue'

	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				isEdit: 0, //判断是添加地址还是修改地址 0为添加 1为修改
				city: '请选择地区',
				addressInfo: {
					name: '',
					phone: '',
					province: '', //省
					city: '', //市
					district: '', //区
					address: '' ,//详细地址
					addId:''
				},
				rules: {
					name: [{
						required: true,
						message: '姓名不能为空',
						trigger: ['blur', 'change']
					}],
					phone: [{
							required: true,
							message: '手机号不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								let iphoneReg = (
									/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
								); //手机号码
								return iphoneReg.test(value)
							},
							message: '请输入正确的手机号码',
							trigger: 'blur',
						}
					],
					province: [{
						required: true,
						message: '地区信息不能为空',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '街道门牌信息不能为空',
						trigger: ['blur', 'change']
					}]

				}
			}
		},
		onLoad(options) {
			if (options.addressInfo) { //如果上一个页面传过来有数据 
			console.log(JSON.parse(decodeURIComponent(options.addressInfo)));
				let res = JSON.parse(decodeURIComponent(options.addressInfo));
				this.isEdit = 1; //跳转过来的页面为更新地址
				this.addressInfo = res; //接收的数据赋值给当前页面
			}


		},
		onReady() {
			this.$refs.form.setRules(this.rules) //为表单设置校验规则
		},
		methods: {
			change(data) {
				this.addressInfo.province = data.data[0]
				this.addressInfo.city = data.data[1]
				this.addressInfo.district = data.data[2]
			},
			submitForm() { //提交地址编辑表单
				var that = this;
				this.$refs.form.validate().then(async (data) => {
						console.log('表单数据信息：', data);
						if (this.isEdit == 0) {							 //添加新地址
							let res = await that.$myRequest({
								url: '/addressControllerBefore/addAddress/'+uni.getStorageSync('userId'),
								method: 'POST',
								data: that.addressInfo
							})
							console.log(res);
							if (res.data.code == 20000) {
								uni.showToast({
									icon: 'success',
									title: '添加成功',
									success() {
										setTimeout(function() {
											uni.navigateBack()
										}, 500);
									}
								});
							}
						} else { 										//更新已有地址
							let res = await this.$myRequest({
								url: '/addressControllerBefore/updateAddress',
								method: 'POST',
								data: this.addressInfo
							})
							if (res.data.code == 20000) {
								uni.showToast({
									icon: 'success',
									title: '修改成功',
									success() {
										setTimeout(function() {
											uni.navigateBack()
										}, 500);
									}
								});
							}
						}


					})
					.catch(err => {
						console.log('表单错误信息：', err);
						return false
					})



			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		background-color: white;
		border-radius: 30rpx;
		width: 90%;
		height: 1000rpx;
		margin: 40rpx auto;
		color: #303133;
	}

	/deep/ .u-form-item {
		margin: 20rpx;
	}

	/deep/ .u-form-item__body__left__content__label {
		font-weight: bold;
	}

	.button {
		width: 80%;
		margin: 100rpx auto;
	}

	text {
		font-size: 15px;
	}
</style>
